<template>
  <div class="login-container">
    <div class="login-box">
      <div class="decorative-line"></div>
      <div class="branding">
        <h1 class="login-title">医学影像智能平台</h1>
        <p class="subtitle">AI赋能精准诊断</p>
      </div>
      <h3 class="login-title">欢迎登录</h3>
      <van-form @submit="onSubmit" class="login-form">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            class="custom-field"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            class="custom-field"
        />

        <div class="login-options">
          <van-checkbox v-model="rememberMe">记住密码</van-checkbox>
          <router-link to="/forgot" class="forgot-link">忘记密码？</router-link>
        </div>

        <van-button
            round
            block
            type="primary"
            native-type="submit"
            class="login-btn"
        >
          立即登录
        </van-button>

        <div v-if="message" :class="['feedback-message', messageType]">
          {{ message }}
        </div>
      </van-form>
      <div class="third-party-login">
        <van-divider>其他登录方式</van-divider>
        <div class="oauth-buttons">
          <van-button icon="wechat" round />
          <van-button icon="dingtalk" round />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const username = ref('')
const password = ref('')
const rememberMe = ref(false)
const message = ref('')
const messageType = ref('')

onMounted(() => {
  const remembered = localStorage.getItem('rememberUsername')
  if (remembered) {
    username.value = remembered
    rememberMe.value = true
  }
})

const onSubmit = () => {
  if (username.value === 'admin' && password.value === '123456') {
    localStorage.setItem('isLoggedIn', 'true')
    if (rememberMe.value) {
      localStorage.setItem('rememberUsername', username.value)
    } else {
      localStorage.removeItem('rememberUsername')
    }
    message.value = '登录成功，正在跳转...'
    messageType.value = 'success'
    setTimeout(() => {
      router.push('/')
    }, 1000)
  } else {
    message.value = '用户名或密码错误'
    messageType.value = 'error'
  }
}
</script>

<style scoped>
.login-box {
  width: 90%;
  max-width: 440px;
  padding: 40px 32px;
  border-radius: 24px;
}

.branding {
  text-align: center;
  margin-bottom: 2rem;
}

.logo {
  width: 80px;
  margin-bottom: 1.5rem;
}

.login-title {
  color: #1e40af;
  margin-bottom: 8px;
}

.subtitle {
  color: #64748b;
  font-size: 16px;
}

.custom-field {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.custom-field:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.login-btn {
  background: #3b82f6;
  font-weight: 500;
  transition: all 0.2s ease;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.third-party-login {
  margin-top: 2rem;
}

.oauth-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}
.decorative-line {
  position: absolute;
  left: -60px;
  top: 50%;
  height: 320px;
  width: 3px;
  background: linear-gradient(to bottom, #3b82f6, #60a5fa);
  transform: translateY(-50%);
}
</style>